<template>
	<!-- 根视图容器，使用类名 'list' ，用于包裹整个列表 -->
	<view class="list">
		<!-- 遍历从父组件传递过来的新闻列表数据，为每个列表项创建一个视图 -->
		<view v-for="(listItem,l) in news" :key="l" class="listshow" @click="goDetail(listItem.id)">
			<!-- 显示列表项的封面图片，使用高度自适应模式和懒加载功能 -->
			<image :src="listItem.cover" mode="heightFix" lazy-load></image>
			<!-- 显示列表项的标题，使用特定的标题样式 -->
			<text class="title">{{listItem.title}}</text>
			<!-- 显示列表项的描述 -->
			<view>{{listItem.desc}}</view>
			<!-- 自定义的价格组件，用于显示商品价格 -->
			<p-price>
				<!-- 使用插槽传入新价格的内容 -->
				<template #newPrice>
					<!-- 显示价格符号和具体新价格，使用特定的新价格样式 -->
					<text class="p-price">￥<text>{{listItem.pprice}}</text></text>
				</template>
				<!-- 使用插槽传入旧价格的内容 -->
				<template #oldPrice>
					<!-- 显示价格符号和具体旧价格，使用特定的旧价格样式，添加删除线效果 -->
					<text class="o-price">￥<text>{{listItem.oprice}}</text></text>
				</template>
			</p-price>
		</view>
	</view>
</template>

<script>
	export default {
		name: "common-list", // 组件名称
		data() {
			// 组件内部的数据对象，当前为空
			return {

			};
		},
		props: ['news'], // 接收从父组件传递过来的新闻列表数据
		methods: {
			// 点击列表项时触发的方法，用于跳转到商品详情页
			goDetail(id) {
				uni.navigateTo({
					// 跳转到商品详情页，并传递商品ID作为参数
					url: `/pages/detail/detail?key=${id}`
				})
			}
		}
	}
</script>

<style scoped>
	/* 列表容器样式，使用弹性布局，允许换行并在水平方向上均匀分布子元素 */
	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* 每个列表项的样式，设置宽度和上下外边距 */
	.list .listshow {
		width: 50%;
		margin: 10rpx 0;
	}

	/* 列表项中图片的样式，设置最大宽度为100%，水平居中显示 */
	.list .listshow image {
		max-width: 100%;
		display: block;
		margin: 0 auto;
	}

	/* 列表项中视图元素的样式，允许文本换行，设置字体大小 */
	.list .listshow view {
		white-space: normal;
		word-break: break-all;
		word-warp: break-word;
		font-size: 28rpx;
	}

	/* 列表项标题的样式，设置为行内块元素，设置字体大小和加粗效果 */
	.list .listshow .title {
		display: inline-block;
		font-size: 32rpx;
		font-weight: 700;
	}

	/* 新价格的外层文本样式，设置字体大小和颜色 */
	.p-price {
		font-size: 20rpx;
		color: #f60;
	}

	/* 新价格的具体数字样式，设置更大的字体大小、颜色和加粗效果 */
	.p-price text {
		font-size: 34rpx;
		color: #f60;
		font-weight: 900;
	}

	/* 旧价格的外层文本样式，设置字体大小、颜色和删除线效果 */
	.o-price {
		font-size: 20rpx;
		color: #ccc;
		text-decoration: line-through;
	}

	/* 旧价格的具体数字样式，设置字体大小和颜色 */
	.o-price text {
		font-size: 30rpx;
		color: #ccc;
	}
</style>